<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<!--
	组件传值：
	父 -> 子   props
	子 -> 父		$emit
	
	<tr v-for="(item, index) of bmiList">
		<td>{{ index + 1 }}</td>
		<td>{{ item.created_at }}</td>
		<td>{{ item.height }}</td>
		<td>{{ item.weight }}</td>
		<td>{{ item.bmi }}</td>
		<td><a href="javascript:void(0)">删除</a></td>
	</tr>
	 <bmi-data-item
	 	v-for="(item, index) of bmiList"
	 	:key="item.id"
	 	:index="index + 1"
	 	:time="item.created_at"
	 	:height="item.height"
	 	:weight="item.weight"
	 	:bmi="item.bmi"
	 ></bmi-data-item>
	 -->
	<div id="app">
		
		<bmi-form @my-submit="parentSubmit"></bmi-form>
		
		
		<h2>BMI列表</h2>
		<table border="1">
			<thead>
				<tr>
					<th>#</th>
					<th>日期</th>
					<th>身高</th>
					<th>体重</th>
					<th>BMI</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				<bmi-item
					v-for="(item, index) of bmiList"
					:key="item.id"
					:item="item"
					:index="index+1"
					@on-del="onDelete"
				></bmi-item>
			</tbody>
		</table>
		
	</div>
	
	<script src="vue.js"></script>
	<script>
		Vue.component('bmi-form', {
			template: `
				<div>
					<h2>免费计算你的身体质量指数 (BMI)</h2>
					<div>
						<span>我的身高:</span>
						<input v-model="bmiForm.height">
					</div>
					<div>
						<span>我的体重:</span>
						<input v-model="bmiForm.weight">
					</div>
					<button @click="handleSubmit">计算BMI</button>
				</div>
			`,
			data() {
				return {
					bmiForm: {
						height: '',
						weight: ''
					}
				}
			},
			methods: {
				handleSubmit() {
					console.log("子组件bmi-form：", this.bmiForm)
					this.$emit("my-submit", this.bmiForm)
				}
			}
		})
		
		Vue.component('bmi-item', {
			template: `
				<tr>
					<td>{{ index }}</td>
					<td>{{ item.created_at }}</td>
					<td>{{ item.height }}</td>
					<td>{{ item.weight }}</td>
					<td>{{ item.bmi }}</td>
					<td><a href="javascript:void(0)" @click="handleDele(item.id)">删除</a></td>
				</tr>
			`,
			props: {
				index: Number,
				item: {
					type: Object,
					required: true
				}
			},
			methods: {
				handleDele(id) {
					// console.log(id)
					this.$emit("on-del", id)
				}
			}
		})
		
		Vue.component('bmi-data-item', {
			template: `
				<tr>
					<td>{{ index }}</td>
					<td>{{ time }}</td>
					<td>{{ height }}</td>
					<td>{{ weight }}</td>
					<td>{{ bmi }}</td>
					<td><a href="javascript:void(0)">删除</a></td>
				</tr>
			`,
			props: ['index', 'time', 'height', 'weight', 'bmi']
		})
		
		
		const app = new Vue({
			el: "#app",
			data() {
				return {
					bmiList: [],
					
				}
			},
			created() {
				this.getList()
			},
			methods: {
				getList() {
					fetch('http://120.27.209.174:1010/api/v1/bmi').then(res => {
						return res.json()
					}).then(res => {
						// console.log(res)
						this.bmiList = res
					})
				},
				// 子组件制作页面交互
				// 逻辑写在页面中（父组件）
				parentSubmit(data) {
					// console.log("父组件", data)
					fetch('http://120.27.209.174:1010/api/v1/bmi', {
						method: 'POST',
						headers: {
							"Content-Type": "application/json"
						},
						body: JSON.stringify(data)
					}).then(res => res.json()).then(res => {
						// console.log(res)
						this.getList()
					})
					// ajax
				},
				onDelete(id) {
					if (confirm("确定要删除数据吗？")) {
						fetch(`http://120.27.209.174:1010/api/v1/bmi/${id}`, {
							method: 'DELETE'
						}).then(res => res.json()).then(res => {
							this.getList()
						})
					}
					
				}
			}
		})
	</script>
</body>
</html>